<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>latency scatter</title>
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body onload="onload()">
	<h1 style="text-align:center">Compass CI jobs' boot time</h1>
	<hr>
	<div id="scatter_vm" style="width:70%;height:800px;float:left;"></div>
	<div style="width:20%;margin-left:5%;margin-top:2%;float:left;">
		<table id="tbvm" style="width:100%;" border="1">
			<caption>over boot time jobs on virtual machine</caption>
			<tr>
				<th width="55%">job_id</th>
				<th>boot_time(Sec)</th>
			</tr>
		</table>
	</div>

	<div id="scatter_dc" style="width:70%;height:800px;float:left;"></div>
	<div style="width:20%;margin-left:5%;margin-top:2%;float:left;">
		<table id="tbdc" style="width:100%;" border="1">
			<caption>over boot time jobs on docker</caption>
			<tr>
				<th width="55%">job_id</th>
				<th>boot_time(Sec)</th>
			</tr>
		</table>
	</div>

	<div id="scatter_hw" style="width:70%;height:800px;float:left;"></div>
	<div style="width:20%;margin-left:5%;margin-top:2%;float:left;">
		<table id="tbhw" style="width:100%;" border="1">
			<caption>over boot time jobs on physical</caption>
			<tr>
				<th width="55%">job_id</th>
				<th>boot_time(Sec)</th>
			</tr>
		</table>
	</div>
	<script>
		var chartDom_vm = document.getElementById('scatter_vm');
		var myChart_vm = echarts.init(chartDom_vm);
		var option_vm;

		var chartDom_dc = document.getElementById('scatter_dc');
		var myChart_dc = echarts.init(chartDom_dc);
		var option_dc;

		var chartDom_hw = document.getElementById('scatter_hw');
		var myChart_hw = echarts.init(chartDom_hw);
		var option_hw;
		var api_data = {
			"vm": {
				"threshold": 180,
				"x_params": [],
				"boot_time": []
			},
			"dc": {
				"threshold": 60,
				"x_params": [],
				"boot_time": []
			},
			"hw": {
				"threshold": 600,
				"x_params": [],
				"boot_time": []
			}
		};

		function get_option(s_name, s_data) {
			var option_any = {
				title: {
					text: "boot time of " + s_name
				},
				grid: {
					left: '3%',
					right: '7%',
					bottom: '7%',
					containLabel: true
				},
				tooltip: {
					axisPointer: {
						show: true,
						type: 'cross',
						lineStyle: {
							type: 'dashed',
							width: 1
						}
					}
				},
				xAxis: [
					{
						name: 'job_id',
						type: 'category',
						data: s_data.x_params
					}
				],
				yAxis: [
					{
						name: "boot time(Sec)",
						type: 'value',
						minInterval: s_data.threshold
					}
				],
				series: [{
					name: "latency of " + s_name,
					data: s_data.boot_time,
					type: 'scatter',
					markPoint: {
						data: [
							{ type: 'max', name: 'Max' },
							{ type: 'min', name: 'Min' }
						]
					},
					markLine: {
						lineStyle: {
							type: 'dashed'
						},
						data: [
							{ yAxis: s_data.threshold }
						]
					}
				}]
			};
			return option_any;
		};
	</script>
</body>
<script>
	function getScatterData() {
		var ajax = new XMLHttpRequest();
		ajax.open("post", "/job_boot_time");
		ajax.send();
		ajax.onreadystatechange = function () {
			if (ajax.readyState == 4 && ajax.status == 200) {
				api_data = JSON.parse(ajax.responseText);

				option_vm = get_option('vm', api_data.vm);
				option_vm && myChart_vm.setOption(option_vm);

				option_dc = get_option('dc', api_data.dc);
				option_dc && myChart_dc.setOption(option_dc);

				option_hw = get_option('hw', api_data.hw);
				option_hw && myChart_hw.setOption(option_hw);
			}
		}
	};

	function getTableData() {
		var ajax = new XMLHttpRequest();
		ajax.open("post", "/top_boot_time");
		ajax.send();
		ajax.onreadystatechange = function () {
			if (ajax.readyState == 4 && ajax.status == 200) {
				var data = JSON.parse(ajax.responseText);
				showTableData(data.hw, 'tbhw');
				showTableData(data.dc, 'tbdc');
				showTableData(data.vm, 'tbvm');
			}
		}
	};

	function showTableData(data, tbid) {
		for (var i = 0; i < data.length; i++) {
			var tr = document.createElement('tr');
			document.getElementById(tbid).appendChild(tr);

			var td = document.createElement('td');
			td.style.textAlign = 'center';
			tr.appendChild(td);
			var a = document.createElement('a');
			td.appendChild(a);
			a.innerText = data[i].job_id;
			a.href = data[i].result_root;
			a.target = '_blank';


			var td = document.createElement('td');
			td.style.textAlign = 'center';
			tr.appendChild(td);
			td.innerText = data[i].boot_time;
		}
	};

	function onload() {
		getScatterData();
		getTableData();
	};
</script>

</html>
